<template>
	<view class="content">
		<!-- 用户信息 -->
		<view class="userInfo">
			<image :src="userInfo.avatar" class="hearder"></image>
		  <view class="info">
				<view class="userName">
				  {{userInfo.userName}}
				  <image src="@/static/bet/vip1.png" v-if="userInfo.memberLevel==1" class="vip-img"></image>
				</view>
				<!-- <view class="code">推荐码：{{code}}</view> -->
				<view class="code">ID：{{userInfo.UserId}}</view>
				<view class="code">手机号：{{userInfo.phone}}</view>
			</view>
		</view>
		<!-- VIP图标 -->
		<view class="vipImg" v-if="userInfo.groupLevel != 0">
			<image src="../../static/mine/vipIcon.png" class="vipIconImg"></image>
		  {{userInfo.groupLevel==1?'联盟商家':userInfo.groupLevel==2?'服务中心':userInfo.groupLevel==3?'分公司':''}}
		</view>
		<!-- 用户资产数据 -->
		<view class="userAssets">
			
			<view class="assetsContent" @tap="goBill(1)">
				<view class="assetsTitle">多多券</view>
				<view>{{walletInfo.balance}}</view>
				<!-- <image src="../../static/mine/right.png" class="rightImg" @tap="goBill"></image> -->
			</view>
			<view class="assetsContent" @tap="goBill(7)">
				<view class="assetsTitle">快乐豆</view>
				<view>{{walletInfo.happyBean}}</view>
			</view>
			<view class="assetsContent" @tap="goBill(6)">
				<view class="assetsTitle">权益积分</view>
				<view>{{walletInfo.greenIntegral}}</view>
			</view>
			<view class="assetsContent" @tap="goBill(3)">
				<view class="assetsTitle">兑换券</view>
				<view>{{walletInfo.withdrawVoucher}}</view>
			</view>
			<view class="assetsContent" @tap="goBill(8)">
				<view class="assetsTitle">提货券</view>
				<view>{{walletInfo.goodsVoucher}}</view>
			</view>
			<view class="assetsContent" @tap="goBill(2)">
				<view class="assetsTitle">购物券</view>
				<view>{{walletInfo.buyVoucher}}</view>
			</view>
			<!-- <view class="assetsContent" @tap="goBill(5)">
				<view class="assetsTitle">积分</view>
				<view>{{walletInfo.integral}}</view>
			</view> -->
			<view class="assetsContent" @tap="goBill(4)">
				<view class="assetsTitle">兑换额</view>
				<view>{{walletInfo.withdrawAmount}}</view>
			</view>
			
			<view class="assetsContent">
				<view class="assetsTitle">出售中金额</view>
				<view>{{walletInfo.saleSummary}}</view>
			</view>
			
			<view class="assetsContent">
				<view class="assetsTitle">预估总积分</view>
				<view>{{walletInfo.allSummary}}</view>
			</view>
			
		</view>
		
		<!-- 用户进度条 -->
		<view class="progress-list">
			
			<view class="progress-item">
				<view class="progress-title">收益</view>
				<view class="data-content">
					<view class="data-list">
						<view class="data-item">目标：{{balancePoolPercent.target}}</view>
						<view class="data-item">累计：{{balancePoolPercent.profitSummary}}</view>
					</view>
					<progressBox :progress="((Number(balancePoolPercent.profitSummary) / Number(balancePoolPercent.target)) * 100).toFixed(2)"></progressBox>
				</view>
			</view>
			
			<view class="progress-item">
				<view class="progress-title">权益</view>
				<view class="data-content">
					<view class="data-list">
						<view class="data-item">积分总额：{{balancePoolPercent.allGreen}}</view>
						<view class="data-item">积分价格：{{balancePoolPercent.greenIntegralPrice}}</view>
						<!-- <view class="data-item">可用积分：{{balancePoolPercent.leaveGreen}}</view> -->
						<view class="data-item">已应用：{{balancePoolPercent.useGreen}}</view>
					</view>
					<progressBox :progress="((Number(balancePoolPercent.useGreen) / Number(balancePoolPercent.allGreen)) * 100).toFixed(2)"></progressBox>
				</view>
			</view>
			
		</view>
		
		
		<!-- 常用功能 -->
		<view class="common">
			<view class="title">常用功能</view>
			<view class="list">
				<view class="item" style="width: 20%;" v-for="(item,index) in commonList" :key="index" @tap="goUrl(item)">
					<image :src="item.img" class="itemImg"></image>
					<view class="itemTitle">{{item.title}}</view>
				</view>
			</view>
		</view>
		<!-- 其他功能 -->
		<view class="common">
			<view class="title">其他功能</view>
			<view class="list">
				<view class="item" v-for="(item,index) in otherList" :key="index" @tap="goUrl(item)">
					<image :src="item.img" class="itemImg" style="width: 56rpx;height: 56rpx;"></image>
					<view class="itemTitle">{{item.title}}</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import { personalData,walletInfo,userBalance,getBalancePoolPercent } from '../../api/api.js';
	import progressBox from '@/components/progressBox/progress-box.vue';
	export default {
		components:{
		  progressBox,
		},
		data() {
			return {
				// 用户信息
				userInfo:'',
				// 钱包信息
				walletInfo:'',
				// 推荐码
				code:'',
				commonList:[
					{id:13,title:'我要充值',img:'../../static/mine/icon13.png'},
					{id:1,title:'我要兑换',img:'../../static/mine/icon12.png'},
					{id:2,title:'我要互转',img:'../../static/mine/icon14.png'},
					{id:3,title:'预约记录',img:'../../static/mine/icon2.png'},
					{id:4,title:'我的商品',img:'../../static/mine/icon3.png'},
				],
				otherList:[
					{id:5,title:'我的社区',img:'../../static/mine/icon8.png'},
					{id:6,title:'银行卡信息',img:'../../static/mine/icon7.png'},
					{id:7,title:'实名中心',img:'../../static/mine/icon6.png'},
					{id:8,title:'邀请好友',img:'../../static/mine/icon9.png'},
					{id:9,title:'安全中心',img:'../../static/mine/icon5.png'},
					{id:10,title:'商家联盟',img:'../../static/mine/icon10.png'},
					{id:14,title:'收货地址',img:'../../static/mine/icon15.png'},
					{id:11,title:'设置中心',img:'../../static/mine/icon11.png'},
				],
				balancePoolPercent:{},
				// percent: 0,     // 资金池百分比
				// greenPercent:0,  // 绿色积分资金池百分比
			}
		},
		onShow() {
			// 获取个人资料
			this.getInfo()
			// 获取个人中心钱包数据
			this.getWallet()
			// 获取资金池百分比
			this.getBalancePoolPercent()
			this.code = uni.getStorageSync('invitationCode')
		},
		methods: {
			// 获取个人资料
			getInfo() {
				let data = {}
				personalData(data).then( res=> {
					this.userInfo = res.data
					uni.setStorageSync('memberLevel',this.userInfo.memberLevel)
				})
			},
			// 获取个人中心钱包数据
			getWallet() {
				let data = {}
				userBalance(data).then( res=> {
					this.walletInfo = res.data
				})
			},
			// 获取资金池百分比
			getBalancePoolPercent() {
				let data = {}
				getBalancePoolPercent(data).then( res=> {
					console.log(res.data)
					this.balancePoolPercent = res.data
					// this.percent = res.data.percent
					// this.greenPercent = res.data.greenPercent
				})
			},
			// 前往账单页面
			goBill(index) {
				uni.navigateTo({
					url:'./myBill?index=' + (index - 1) + '&level=' + this.userInfo.groupLevel
				})
			},
			goUrl(item) {
				if( item.id == 5 ) {
					uni.navigateTo({
						url:'./myItem'
					})
				}else if( item.id == 1 ) {
					uni.navigateTo({
						url:'../withdraw/withdrawalMoney'
					})
				}else if( item.id == 2 ) {
					uni.navigateTo({
						url:'../mine/exchange'
					})
				}
				else if( item.id == 3 ) {
					uni.navigateTo({
						url:'../index/appointmentRecord'
					})
				}else if( item.id == 8 ) {
					uni.navigateTo({
						url:'./invite'
					})
				}else if( item.id == 4 ) {
					uni.navigateTo({
						url:'./myOrder'
					})
				}else if( item.id == 7 ) {
					if( this.userInfo.isRealName == 1 ) {
						uni.showToast({
							icon: 'none',
							title: '已经进行过实名认证'
						})
						return
					}
					uni.navigateTo({
						url:'./realname'
					})
				}else if( item.id == 6 ) {
					uni.navigateTo({
						url:'../set/paymentMethod'
					})
				}else if( item.id == 9 ) {
					uni.navigateTo({
						url:'../set/securityCenter'
					})
				}else if( item.id == 10 ) {
					uni.navigateTo({
						url:'./changeLevel'
					})
				}else if( item.id == 11 ) {
					uni.navigateTo({
						url:'../set/index'
					})
				}else if( item.id == 12 ) {
					uni.navigateTo({
						url:'../withdraw/withdrawalMoney'
					})
				}else if( item.id == 13 ) {
					console.log(122)
					uni.navigateTo({
						url:'../recharge/index'
					})
				}else if( item.id == 14 ) {
					uni.navigateTo({
						url:'../goods/addressList'
					})
				}
			}
		}
	}
</script>

<style lang="less" scoped>
  .content {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 99rpx;
		background-image: url(../../static/mine/banner.png);
		background-size: cover;
		width: 100%;
		height: 100vh;
		padding-bottom: 60rpx;
		// 用户信息
		.userInfo {
			width: 670rpx;
			display: flex;
			.hearder {
				width: 130rpx;
				height: 130rpx;
				border-radius: 50%;
			}
			.info {
				margin-left: 20rpx;
				.userName {
					display: flex;
					align-items: center;
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #1A1A1A;
					line-height: 45rpx;
					.vip-img {
						width: 92rpx;
						height: 36rpx;
						margin-left: 8rpx;
					}
				}
				.code {
					display: flex;
					align-items: center;
					margin-top: 10rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
					line-height: 33rpx;
					.authentication {
						margin-left: 10rpx;
						padding: 4rpx 11rpx;
						width: 76rpx;
						height: 32rpx;
						background: #B9B9B9;
						border-radius: 16rpx;
						font-size: 18rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 30rpx;
						text-align: center;
					}
					.active {
						background: #FE3B33;
						color: #ffffff;
					}
				}
			}
		}
		// .VIP图标 
		.vipImg {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 150rpx;
			height: 52rpx;
			background: #FE3B33;
			border-radius: 100rpx 0rpx 0rpx 100rpx;
			position: absolute;
			right: 0;
			top:143rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 52rpx;
			.vipIconImg {
				margin-right: 15rpx;
				width: 32rpx;
				height: 32rpx;
			}
		}
		// 用户资产数据
		.userAssets {
			padding-bottom: 40rpx;
			display: flex;
			flex-wrap: wrap;
			margin: 43rpx 0 0rpx 0;
			background-image: url(../../static/mine/assets.png);
			background-size: cover;
			background-repeat: no-repeat;
			width: 700rpx;
			height: 420rpx;
			border-radius: 40rpx;
			// overflow: hidden;
			.assetsContent {
				// position: relative;
				margin-top: 53rpx;
				width: 33%;
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 36rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				.assetsTitle {
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: rgba(255, 255, 255, 0.9);
					margin-bottom: 16rpx;
				}
				// .rightImg {
				// 	z-index: 3;
				// 	position: absolute;
				// 	right: 56rpx;
				// 	bottom: 50rpx;
				// 	width: 10rpx;
				// 	height: 18rpx;
				// }
			}
		}
		.progress-list {
			width: 690rpx;
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			margin-top: 20rpx;
			height: 220rpx;
			.progress-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 50%;
				.progress-title {
					margin-bottom: 20rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 700;
					color: #1A1A1A;
					line-height: 40rpx;
				}
			}
			.data-content {
				display: flex;
				justify-content: space-between;
				.data-list {
					margin-right: 20rpx;
					margin-top: 20rpx;
					height: 120rpx;
					justify-content: space-between;
					display: flex;
					flex-direction: column;
					.data-item {
						font-size: 20rpx;
						color: #616871;
					}
				}
			}
		}
		// 常用功能
		.common {
			margin-bottom: 24rpx;
			padding: 30rpx 0;
			width: 690rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(23, 119, 255, 0.08);
			border-radius: 20rpx;
			.title {
				margin-left: 30rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #1A1A1A;
				line-height: 40rpx;
			}
			.list {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				.item {
					margin-top: 40rpx;
					width: 25%;
					display: flex;
					flex-direction: column;
					align-items: center;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #1A1A1A;
					line-height: 33rpx;
					.itemImg {
						width: 50rpx;
						height: 50rpx;
						margin-bottom: 12rpx;
					}
				}
			}
		}
	}
</style>
